<style type="text/css">
    .left-panel {
        float: left;
        width: 75%;
    }
    
    .right-panel {
        float: right;
        width: 20%;
        padding-left: 40px;
    }
</style>

<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    window.onload = function()
    {       
        CKEDITOR.replace( 'description',{height: 450,} );
        
    }
</script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){  
        /*
        $("#status").live('change', function (){
            categories = $(".category:checked");
            number_category = categories.length;
            category_id_string = ';'
            if(number_category != 0){
                for(i=0;i<number_category;i++){
                    category_id_string += categories[i].value + ';';
                }


                $("#category_id").val(category_id_string);
            }
            alert($("#category_id").val());
        });
        */
        $('#create_post').click(function(){


            
            var related_products = $('.related_products:checked');
            var len = related_products.length;
            var related_products_string = '';
            if(len != 0){
                for(i=0;i<len;i++){
                     related_products_string += related_products[i].value + ';';
                 }
                 if($("#related_products").val() == ''){
                     related_products_string = related_products_string.slice(0,-1);
                 }else{
                     related_products_string += $("#related_products").val();
                 }
                 
                 $("#related_products").val(related_products_string);
            }

            categories = $(".category:checked");
            number_category = categories.length;
            category_id_string = ';'
            if(number_category != 0){
                for(i=0;i<number_category;i++){
                    category_id_string += categories[i].value + ';';
                }


                $("#category_id").val(category_id_string);
            }


            $('form').get(0).setAttribute('action','?r=product/create');
            $('form').submit();
        });

        $("#search_box").keyup(function(e){
            if(e.keyCode == 13 ){
                search_string = $('#search_box').val();
                dataString = 'search_string='+search_string;
                $.ajax({
                      type: 'post',
                      url: '?r=product/create',
                      data: dataString,
                      dataType: "html",
                      success: function(data){
                          document.getElementById("search_result").innerHTML = '';
                          document.getElementById("search_result").innerHTML = data;
                      }
                });
            }
        })

    });
    
</script>

<form name="create_form" id="create_form" onkeypress="return event.keyCode != 13;" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
    <div class="left-panel">
        <h3>Thông tin cơ bản</h3><hr />
        <table>
            <tr>
                <td><label for="normal">Tên sản phẩm</label></td>
                <td><label for="normal">Slug</label></td>
            </tr>
            <tr>
                <td><input name="name" id="name"  type="text" size="70" style="width:320px"></td>
                <td><input type="text" name="slug" id="slug" style="width:320px"></td>
            </tr>
            <tr>
                <td><label for="normal">Giá</label></td>
                <td><label for="normal">Giá khuyến mãi</label></td>
            </tr>
            <tr>
                <td><input name="price" id="price"  type="text" size="70" style="width:320px"></td>
                <td><input type="text" name="price_sale_off" id="price_sale_off" style="width:320px"></td>
            </tr>
            <tr>
                <td><label for="normal">Số lượng</label></td>
                <td><label for="normal">Tags</label></td>
            </tr>
            <tr>
                <td><input type="text" name="weight" id="weight" style="width:320px"></td>
                <td><input name="tags" id=""  type="text" size="70" style="width:320px"></td>
            </tr>

        </table>

       
        <br />
        <label for="normal">Khuyến mãi</label>
        <textarea  id="promotion" name="promotion" rows="3" style="width: 98%"></textarea>
        <label for="normal">Mô tả sản phẩm</label>
        <textarea  id="description" name="description" rows="12" style="width: 98%"></textarea>
        
        <br />
        <div>
         <label for="normal">Tìm kiếm sản phẩm liên quan</label>
         <input id="search_box"type="text" placeholder="Tìm kiếm sản phẩm liên quan"/>
         <input name="related_products" id="related_products" type="hidden"/>
         <div id="search_result">
            
         </div>
         
         <br/>
        </div>
        <input type="hidden" id="images" />
        <input type="hidden" id="icon" />
        <table border="0">
            <tr>
                <td>
                    <label for="normal">Hình đại diện sản phẩm</label>
                    <input name="product/thumb" id="thumb" type="file"  size="20" style="opacity: 0;">
                    <input type ="hidden" name="thumb" id="thumb_url"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div><img id="thumb_content" src="" style="width:200px;height:200px;margin-top:15px"/></div>
                    <div id="thumb_status"></div>
                </td>
            </tr>
        </table>
        <br />
        <label for="normal">Ảnh sản phẩm</label>
        <input name="product/images" id="screenshot" class="screenshot" type="file"  size="20" style="opacity: 0;">
        <div id="screenshots_status"></div>
        <input type="hidden" name="images" id="screenshots_url" type="text" value=''/>
        <table>
            <tr>
                <td id="screenshots_content" align="center"></td>
            </tr>
        </table>
        
         <span style="clear:left"></span>
         <br />
         

         
         <br /><br />
         <center>
         <button class="btn" id="create_post" href="#"><span class="icon16 icomoon-icon-cog"></span> Create new product</button>
         <button class="btn" id="cancel" href="?r=post"><span class="icon16 icomoon-icon-cog"></span> Cancel</button>
         </center>
    </div>
    <div class="right-panel">
        <h3>Thông tin liên quan </h3><hr />

        <label for="normal" style="width:225px">Chọn danh mục sản phẩm</label>
        <div style="width: 225px">
            <input type="hidden" name="category_id" id="category_id"/>
            <?php
            function build_table_category($category_tree,$table = ''){
                if(count($category_tree) != 0){
                    $table .= '<ul style="list-style: none">';
                    foreach($category_tree as $cate){

                        $table .= '<li>';
                        $table .= '<label><input type="checkbox" class="category" id="'.$cate['id'].'" value="'.$cate['id'].'"/>'.$cate['name'].'</label>';
                        if(isset($cate['children'])){

                            $table = build_table_category($cate['children'],$table);

                        }
                        $table .= '</li>';

                    }
                    $table .= '</ul>';
                }
                return $table;
            }
            echo build_table_category($pagevals['category_tree']);
        ?>
            
            
            
        </div>

        <br /><br />

        <label for="normal" style="width:225px">Trạng thái</label>
        <select name="status" id="status" style="opacity: 0;">
            <option value="pending" selected="selected">Pending</option>
            <option value="approved">Approved</option>
            <option value="active">Active</option>
            <option value="blocked">Blocked</option>
        </select><br /><br />



        <label for="normal" styl>Sản phẩm Hot?</label>
        <select name="hot_status" id="hot_status" style="opacity: 0;">
            <option value="0">No</option>
            <option value="1" selected="selected">Yes</option> 
        </select><br /><br />

        <label for="normal">Nhãn hiệu</label>
        <select name="brand" id="brand" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['brand']) != 0){
                foreach($pagevals['selection_label']['brand'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_brand" id="new_brand" value="" style="width:182px" placeholder="Nhãn hiệu"/>
        <br /><br />

        <label for="normal">Màu sắc</label>
        <select name="color" id="color" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['color']) != 0){
                foreach($pagevals['selection_label']['color'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_color" id="new_color" value="" style="width:182px" placeholder="Màu sắc"/>
        <br /><br />

        <label for="normal">Chất liệu</label>
        <select name="material" id="material" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['material']) != 0){
                foreach($pagevals['selection_label']['material'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_material" id="new_material" value="" style="width:182px" placeholder="Chất liệu"/>
        <br /><br />



        <label for="normal">Size</label>
        <select name="size" id="size" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['size']) != 0){
                foreach($pagevals['selection_label']['size'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_size" id="new_size" value="" style="width:182px" placeholder="Size"/>
        <br /><br />

        <label for="normal">Khối lượng</label>
        <select name="weight" id="weight" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['weight']) != 0){
                foreach($pagevals['selection_label']['weight'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_weight" id="new_weight" value="" style="width:182px" placeholder="Khối lượng"/>
        <br /><br />

    </div>
    <span style="clear: both"></span>
</form>